<template>
  <div class="face-result">
    <div v-if="showLoading">
      <loadingPage/>
    </div>
    <div class="content">
      <img class="face" src="~@/assets/imgs/face_fail.png" alt="">
      <div class="result">
        Recognition failed
      </div>
    </div>
    <div class="tips">{{tips}}</div>
      <!-- {{faceMode}} -->
  <button class="footer btn-ui" v-if="mode=='avatar'" @click="submint">Upload avatar</button>
  <button class="footer btn-ui" v-if="mode=='back'" @click="submint">Return</button>
  </div>
</template>
<script>
  import loadingPage from '@/components/loading-page';
  // import Hybrid from '@/components/uzone-hybrid';

  export default {
    components: {
      loadingPage
    },
    props: {},
    data() {
      return {
        tips: 'Please take another photo',
        mode: 'avatar',
        timeOut: null,
        showLoading: false,
        trackerInfo: {}
      }
    },
    created() {
      let query = this.$route.query;
      this.tips = query.faceTips;
      this.mode = query.faceMode;
      this.trackerInfo = query.pageTrackerInfo
    },
    methods: {
      useDiscrean() {
        // const hybrid = new Hybrid(this.$os.android ? 'android' : 'ios');
        let me = this;
        this.$hybrid.action('discern', {
          param: {
            count: 1,
          },
          callback(data) {
            if (data.status == 1) {
              if (data.data.status == 1) {
                //face success
                let params = {
                  type: 2
                };
                me.showLoading = true;
                me.associationFaceDetection(params)

                // 人脸识别独立页 - 人脸认证 - 成功
                this.$buryPoint.action({
                  eventName: 'onlyFaceInfo_face_success',
                  ...me.trackerInfo
                });

              } else {
                //face fail
                me.showLoading = false;
                me.mode = 'avatar';
                me.tips = 'Please take another photo'
              }
            }
          }
        });
      },
      submint() {
        if (this.mode == 'avatar') {
          if (this.timeOut) {
            clearTimeout(this.timeOut)
          }
          ;
          let me = this;
          this.timeOut = setTimeout(() => {
            me.useDiscrean()
          }, 200)
        }
        ;
        if (this.mode == 'back') {
          this.$router.go(-1)
        }
      },
      associationFaceDetection(params) {
        let me = this;
        me.$api.associationFaceDetection(params).then(res => {
          me.showLoading = false;
          let {status, error, data} = res;
          if (status == '1' && error == '00000000') {
            let {status, repeatFlag} = data;
            if (status == 0) {
              // face 1:1 fail
              if (repeatFlag == 0) {
                // 'dont try again'
                me.mode = 'back';
                me.tips = "Today's upload times have been exhausted, please try again tomorrow!";
              } else if (repeatFlag == 1) {
                //  try again'
                me.mode = 'avatar';
                me.tips = "Please take another photo";
              }
            } else if (status == 1) {

              // 人脸识别独立页 - 人脸1比1 - 成功
              me.$buryPoint.action({
                eventName: 'onlyFaceInfo_face_compare_success',
                ...me.trackerInfo
              });

              me.$router.replace('/product/productList')
            }
          }
        })
      },
    }
  }
</script>


<style lang="scss" scoped>
@import '~@/assets/scss/function';
  .face-result {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 11;
    width: 100vw;
    height: 100vh;
    background: $bodyBg;
    text-align: center;
    padding-top: 300px;

    .footer {
      width: 670px;
      margin: 80px auto 0;
    }

    .tips {
      margin-top: 32px;
      font-size: 32px;
      color: #333;
      padding: 0 40px;
      text-align: center;
    }

    .content {
      width: 464px;
      margin: 0 auto;
      .face {
        width: 122px;
        height: 122px;
      }

      .result {
        margin-top: 56px;
        color: #FF3541;
        font-size: 40px;
        position: relative;
        font-weight: bold;
        & > img {
          width: 36px;
          margin-right: 20px;
        }
      }

      .result:after {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        // background: url(~@/assets/imgs/icon-tips.png) no-repeat center;
        background-size: 100% 100%;
        width: 36px;
        height: 36px;
      }

    }
  }
</style>
